<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>UML编辑框</title>
</head>
<body>
	<div id="one">
		<fieldset class="layui-elem-field layui-field-title"
			style="margin-top: 10px;">
			<legend>信息查询</legend>
		</fieldset>
		<form class="layui-form">
			<div class="layui-form-item">
				<label class="layui-form-label">ID</label>
				<div class="layui-input-block">
					<input type="text" name="id" lay-verify="title" autocomplete="off"
						placeholder="请输入ID" class="layui-input" id="id">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn layui-btn-small" lay-submit=""
						lay-filter="query">确定</button>
					<button type="reset"
						class="layui-btn layui-btn-primary layui-btn-small">重置</button>
				</div>
			</div>
		</form>
	</div>
	<div id="two" class="layui-hide">
		<fieldset class="layui-elem-field layui-field-title"
			style="margin-top: 10px;">
			<legend>信息修改</legend>
		</fieldset>
		<form class="layui-form" id="query-form">
			<div id="hidebtn" class="layui-hide"></div>
			<div class="layui-form-item">
				<label class="layui-form-label">ID</label>
				<div class="layui-form-mid" id="ufid"></div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">名称</label>
				<div class="layui-input-block">
					<input type="text" name="name"
						lay-verify="name" autocomplete="off"
						placeholder="请输入名称" class="layui-input" id="name">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">URL</label>
				<div class="layui-input-block">
					<input type="text" name="URL" lay-verify="URL" autocomplete="off"
						placeholder="请输入URL" class="layui-input" id="URL">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">权限</label>
				<div class="layui-input-block">
					<input type="text" name="value" lay-verify="value"
						autocomplete="off" placeholder="请输入权限" class="layui-input"
						id="value">
				</div>
			</div>
			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">描述</label>
				<div class="layui-input-block">
					<textarea id="description" name="description"
						placeholder="请输入对该UML的描述" class="layui-textarea"></textarea>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn layui-btn-small" lay-submit=""
						lay-filter="demo2">提交</button>
					<button type="reset"
						class="layui-btn layui-btn-primary layui-btn-small">重置</button>
				</div>
			</div>
		</form>
	</div>
	<script type="text/javascript" src="plugins/layui/layui.js"></script>
	<script>
		layui.use([ 'form' ], function() {
			var form = layui.form(),
				$ = layui.jquery,
				layer = layui.layer;
	
			var norepeat = {};
	
			//曲线救国
			if ($('#hidebtn').html() != null && $('#hidebtn').html() != '') {
				query($('#hidebtn').html());
			}
	
			//监听确认更改提交
			form.on('submit(demo2)', function(data) {
				if (JSON.stringify(norepeat) != JSON.stringify(data.field)) {
					var id = $('#ufid').html();
					var json = {
						"id" : id,
						"name" : $('#name').val(),
						"url" : $('#URL').val(),
						"value" : $('#value').val(),
						"description" : $('#description').val()
					};
					norepeat = data.field;
	
					$.ajax({
						url : 'updateUrlFilter',
						type : "PUT",
						data : JSON.stringify(json),
						async : false,
						dataType : 'json',
						contentType : 'application/json;charset=utf-8',
						success : function(info) {
							layer.msg('修改成功！');
						}
					});
				}
				return false;
			});
			//监听查询提交
			form.on('submit(query)', function(data) {
				//防止多次请求
				if (data.field.id != '' && data.field.id != null) {
					query(data.field.id);
					$('#two').removeClass('layui-hide');
					$('#two').addClass('layui-show');
				}
				return false;
			});
	
			function query(id) {
				$.ajax({
					url : 'getUrlFilter/' + id,
					type : "GET",
					async : false,
					success : function(info) {
						//清空查询的输入框
						$('#id').val('')
						//将查询结果显示在页面上
						$('#ufid').html(info.id);
						$('#URL').val(info.url);
						$('#value').val(info.value)
						$('#name').val(info.name);
						$('#description').val(info.description);
					}
				});
	
				//重新渲染组件
				form.render();
			}
		});
	</script>
</body>

</html>